<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Package Information</a></li>
        <li><a href="#tabs-2">Product List</a></li>
    </ul>
    <div id="tabs-1">
        <input type="hidden" name="txtID" id="txtID" value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->ID|escape:'html'}}{{/if}}"/>
        <table class="w720px">
            <tr>
                <td class="w100 tar red">Package Name</td>
                <td>
                    <div class="pr10">
                        <input id="txtPackageName" name="txtPackageName" type="text"  class="classic-input w100pc"
                               value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->PackageName|escape:'html'}}{{/if}}"
                               onblur="getAlias()"
                               />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100 tar red">Alias</td>
                <td>
                    <div class="pr10">
                        <input id="txtAlias" name="txtAlias" type="text"  class="classic-input w100pc"
                               value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->Alias|escape:'html'}}{{/if}}"
                               />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100 tar red">Unit Price</td>
                <td>
                    <div class="pr10">
                        <input id="txtUnitPrice" name="txtUnitPrice" type="number" min="0"  class="classic-input w100pc"
                               value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->UnitPrice|escape:'html'}}{{/if}}"
                               />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100 tar vtat"><label class="lh24">Description</label></td>
                <td>
                    <div class="">
                        <textarea id="txtDescription" name="txtDescription" style="resize: vertical;" class="classic-input w100pc">{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->Description|escape:'html'}}{{/if}}</textarea>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div id="tabs-2">
        <div class="List">
            <div class="mb4 mt4 ml4 mr4" style="border: 1px solid #ccc">
                <div class="pt1 pb1 pl1 pr1">
                    <h4 class="pl8 pt7 pb8 pr8 ovfh mt0 mb0 mr0 ml0" 
                        style="background: #d7d7d7;margin: 0">Products of Package</h4>
                </div>
                <div class="pl8 pr8 pt8 pb8 mt0 mb0 ml0 mr0 ovfa">
                    <div class="grid_x" id="ProductItems">
                        {{if isset($Data["Products"])}}
                            {{foreach $Data["Products"] as $pr}}
                                <div class="ProductItem Pr_{{$pr->ProductID}} grid_3 mb4 mt4 ml4 mr4" style="border: 1px solid #ccc">
                                    <div class="pt1 pb1 pl1 pr1">
                                        <h4 class="pl8 pt7 pb8 pr8 ovfh mt0 mb0 mr0 ml0" style="background: #d7d7d7;margin: 0">
                                            {{$pr->ProductName|escape:'html'}}
                                        </h4>
                                        <div class="pa r8 t8">
                                            <span style="cursor: pointer" onclick="DelProductItem(this)">✖</span>
                                        </div>
                                        <div class="pl8 pr8 pt8 pb8 mt0 mb0 ml0 mr0 ovfa">
                                            <img class="w100pc" src="{{$pr->Image|escape:'html'}}"/>
                                            <div class="pr10">
                                                <input class="classic-input w100pc num" value="{{$Data["tmp"][$pr->ProductID]}}"/>
                                                <input type="hidden" class="hidden" value="{{$pr->ProductID}}"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {{/foreach}}
                        {{/if}}
                    </div>
                </div>
                <div class="grid_x pt12 pb12 mt12" style="border-top:1px dotted #ccc">
                    <div class="grid_3"><label class="lh24">Album item</label></div>
                    <div class="grid_10 pr32">
                        <div class="pr10 pr">
                            <input id="txtProductToken" class="classic-input w100pc"/>
                        </div>
                    </div>
                    <div class="grid_4">
                        <button class="classic-button" onclick="AddAlbumItem()"><span>Add</span></button>
                    </div>

                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
</div>
<div class="pt8">
    <button class="gray-button" onclick="FlexiGrid.CancelEdit();"><span>Back</span></button>
    <button class="green-button" onclick="FlexiGrid.Save();"><span>Save</span></button>
</div>
<script>
    $(document).ready(function () {
        $( "#tabs" ).tabs();
        addEditorContent("txtDescription");
        $("#txtProductToken").tokenInput("{{base_url()}}admin-planners/product/tokenProduct", {
            resultsFormatter: function(item){ return "<li><div class='token-item'><img src='"+item.Image+"'/><div><h5>"+ item.ProductID +"<h5><p>"+ item.ProductName +"</p></div></div></li>" },
            tokenFormatter: function(item) { return "<li>" + item.ProductName + "</li>" },
            searchDelay: 1000,
            propertyToSearch: "ProductName",
            hintText:"enter to search product",
            minChars: 1,
            theme: "facebook",
            tokenLimit: 5,
            onAdd: function (item) {
                AddProductItem(item);
                return;
            }
        });
    });
</script>